<template>
  <div class="container board">
    <div class="main-board">
      <div class="board-bar">
        <el-button icon="el-icon-folder" type="text" @click="onSave">保存</el-button>
        <el-button icon="el-icon-plus" type="text" @click="onAdd">添加字段</el-button>
      </div>
      <div class="main-board-center">
        <el-table ref="dragTable" class="draggable-table" :data="columns" row-key="id">
          <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
          <el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" />
          <el-table-column label="字段描述" min-width="10%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnComment"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="物理类型" prop="columnType" min-width="10%" :show-overflow-tooltip="true" />
          <el-table-column label="列表" min-width="5%">
            <template slot-scope="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="详情" min-width="5%">
            <template slot-scope="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="查询" min-width="5%">
            <template slot-scope="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="查询方式" min-width="10%">
            <template slot-scope="scope">
              <el-select v-model="scope.row.queryType">
                <el-option label="=" value="EQ" />
                <el-option label="!=" value="NE" />
                <el-option label=">" value="GT" />
                <el-option label=">=" value="GTE" />
                <el-option label="<" value="LT" />
                <el-option label="<=" value="LTE" />
                <el-option label="模糊" value="LIKE" />
          <!--  <el-option label="位于区间" value="BETWEEN" />-->
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="显示类型" min-width="12%">
            <template slot-scope="scope">
              <el-select v-model="scope.row.htmlType" placeholder="默认文本框" clearable>
                <el-option label="文本框" value="el-input" />
                <el-option label="下拉框" value="el-select" />
                <el-option label="级联下拉" value="el-cascader" />
                <el-option label="单选框" value="el-radio-group" />
                <el-option label="复选框" value="el-checkbox-group" />
                <el-option label="日期控件" value="el-date-picker" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典类型" min-width="12%">
            <template slot-scope="scope">
              <template v-if="scope.row.htmlType === 'el-cascader'">
                <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                  <el-option v-for="dict in treeDict" :key="dict.dictType"  :label="dict.dictName" :value="dict.dictType">
                    <span style="float: left">{{ dict.dictName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                  </el-option>
                </el-select>
              </template>
              <template v-else>
                <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                  <el-option v-for="dict in listDict" :key="dict.dictType"  :label="dict.dictName" :value="dict.dictType">
                    <span style="float: left">{{ dict.dictName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                  </el-option>
                </el-select>
              </template>

            </template>
          </el-table-column>

          <template v-if="tableName === 'tb_talent' || tableName === 'tb_company'">
            <el-table-column min-width="12%" align="center">
              <template v-slot:header>
                  <span>
                    关联订单
                    <el-tooltip content="勾选后会在订单中显示"> <i class="el-icon-question"></i> </el-tooltip>
                  </span>
              </template>
              <template v-slot="{row}">
                <el-checkbox true-label="1" false-label="0" v-model="row.isRequired"></el-checkbox>
              </template>
            </el-table-column>
          </template>

          <el-table-column label="操作" min-width="10%">
            <template v-slot="{row}">
              <el-button type="danger" icon="el-icon-delete" size="mini" v-if="row.isInsert !== '1'" @click="onDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <add-column ref="addColumn" :table-id="tableId" @ok="this.onAddOk"/>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import addColumn from './add-column'
import {delColumn, updateColumnBatch} from "@/api/system/tableColumn";
import {listTypeAll} from "@/api/system/dict/type";

export default {
  name: 'column-edit',
  components: {
    addColumn
  },
  props: {
    columns: Array,
    tableId: [Number, String],
    tableName:String
  },
  data() {
    return {
      newDragIndex: 0,
      dragIndex: 0,
      listDict: [], // 列表字典
      treeDict: [] // 树字典
    }
  },
  methods: {
    init() {
      // 业务字典-列表
      listTypeAll({isCustomer: 1, dictKind: 1}).then(res => {
        this.listDict = res.data
      })
      // 业务字典-树形
      listTypeAll({isCustomer: 1, dictKind: 2}).then(res => {
        this.treeDict = res.data
      })

      this.$nextTick(_ => {
        this.initDrag()
      })
    },
    onSave() {
      updateColumnBatch(this.columns).then(res => {
        this.$modal.msgSuccess('保存成功！')
        this.$emit('update-column')
      })
    },
    onAdd() {
      this.$refs.addColumn.show()
    },
    onAddOk() {
      this.$emit('update-column')
    },
    onDelete(row) {
      if(row.isInsert === '1') {
        this.$modal.msgWarning("不能删除系统字段");
        return
      }
      this.$modal.confirm('将会删除掉真实的数据，如果字段是您刚刚新增的，可以删除，否则请谨慎使用！').then(() => {
        delColumn(row.id, {tableId: this.tableId}).then(res => {
          this.$emit('update-column')
        })
      })
    },

    initDrag() {
      const el = document.querySelectorAll('.draggable-table .el-table__body-wrapper > table > tbody')[0]

      Sortable.create(el, {
        disabled: false,
        ghostClass: 'sortable-ghost',
        admiation: 150,
        onEnd: (e) => {
          this.columns.splice(e.newIndex, 0, this.columns.splice(e.oldIndex, 1)[0])
        }
      })
    }
  },
  computed: {

  },
  mounted() {
    this.init()
  }
}
</script>

<style  lang="scss">
.board {
  background-color: #ebeef5;
  .main-board {
    height: 100%;
    width: auto;
    overflow: auto;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
  }
  &-bar {
    position: relative;
    height: 42px;
    text-align: right;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1e8e8;
  }
}
</style>
